<template>
	<van-nav-bar :title="queryProps === 'memory'? '忘记密码':'注册账号'" left-arrow @click-left="onClickLeft" />
	<view ref="signIn" class="title"><text v-if="queryProps==='memory'">修改密码</text><text v-else>注册账号</text></view>
	<view class="mian">
		<van-form @submit="onSubmit">
			<van-cell-group inset>
				<!-- 通过 pattern 进行正则校验 -->
				<van-field v-model="pel" label="手机号:" name="手机号:" placeholder="手机号"
					:rules="[{ pattern:pelRegular, message: '请输入正确内容' }]" />
				<van-field v-model="password" label="密码:" placeholder="输入密码" right-icon="warning-o" type= 'password'
					:rules="[{ pattern:pwdREgular, message: '请输入正确内容' }]" />
					<!-- 通过 validator 进行函数校验 -->
				<van-field v-model="repeat" name="password" label="确认密码:" placeholder="再次输入密码" type= 'password' right-icon="warning-o"
					:rules="[{ validator:asyncValidator, message: '请输入正确内容' }]" />
					<!-- 通过 required 进行空值校验 -->
				<van-field v-model="sms" name="sms" center clearable label="短信验证码:"
					:rules="[{ required:true, message: '验证码不能为空' }]" placeholder="请输入短信验证码">
					<template #button>
						<van-button size="small" type="primary" @click="Verification">发送验证码</van-button>
					</template>
				</van-field>
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit">
					<text v-if="load">提交</text><van-loading v-else type="spinner"  />
				</van-button>
			</div>
		</van-form>
	</view>
	

</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	// 防抖函数引入
	import { debounce } from '@/utils/debounce'
	import { ref } from 'vue';
	onLoad((query : any) => {
		// 接受传递过来的值
		queryProps.value = query.type
	})
	// 判断是注册还是忘记密码
	const queryProps = ref<string>('')
	// 放回到登录页面
	const onClickLeft = () => history.back();
	// 定义手机号的变量
	const pel = ref('');
	// 密码的变量
	const password = ref('');
	// 定义确认密码的变量
	const repeat = ref('')
	// const signIn = ref(null)
	// console.log(signIn.value)
	// 定义一个加载变量来控制加载动画
	const load = ref<boolean>(true)
	// 定义一个手机号的正则表达式
	const pelRegular = /^\+?[1-9]\d{1,14}$/
	//  定义一个密码的正则表达式
	const pwdREgular = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\w\s]).{8,32}$/
	// ts定义一个类型来限制提交的类型
	type Submit = {
		pel: string
		password: string
		sms: string
	}
	// 点击提交
	const onSubmit = debounce((values : Submit) => {
		// 点击为加载动画
		load.value = false
		console.log('submit', values);
		if(queryProps.value==='memory'){
			// 发起忘记密码的请求
			setInterval(()=>{
				//请求回来时加载为取消
				load.value = true
				},1000)
		}else{
			//请求回来时加载为取消
			setInterval(()=>{
				load.value = true
				// 发起注册账号的请求
				},1000)
		}
		
	},300)
	// 判断确认密码是否与新密码一样
	const asyncValidator = debounce((val : string) =>
		// 该方法默认创建的promise对象
		new Promise((resolve) => {
			// 判断是否一样
			resolve(val === password.value)
	}),300);
	
	// 验证码的变量
	const sms = ref('')
	const Verification = ()=>{
		console.log('发送验证码成功')
	}
</script>

<style lang="scss" scoped>
	.mian {
		padding: 20px;
		box-sizing: border-box;
		height: 100vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		--van-field-input-text-color: #fffae8
	}
	.title{
		color: white;
		font-size: 30px;
		text-align: center;
		margin-top: 50px;
	}
    ::v-deep.van-field__body{
		i{
			display: none;
		}
	}
	::v-deep.van-nav-bar__left {
		position: relative;
		--van-nav-bar-arrow-size: 24px;

	}

	::v-deep.van-field__label {
		color: white;
		font-size: 24px;
	}

	::v-deep.van-nav-bar .van-icon {
		color: black;
	}

	::v-deep.van-cell {
		background-color: transparent;
	}

	::v-deep.van-nav-bar__title {
		margin: 0;
		--van-nav-bar-title-font-size: 24px;
	}

	::v-deep.van-ellipsis {
		overflow: visible;
	}

	::v-deep.van-cell-group--inset {
		// margin: 0;
		border-radius: 0;

		.van-cell {
			margin: 10px;
		}
	}

	::v-deep.van-cell-group {
		background: transparent;
	}
</style>